我正在参加「掘金·启航计划」

vue中的computed和watch我们经常会用到，那么在什么场景下使用computed和watch，两者又有什么区别呢，傻傻分不清楚。记录一下，温故而知新！

computed是计算属性，基于data中声明过或者父组件传递的 props 中的数据通过计算得到的一个新值，这个新值只会根据已知值的变化而变化，换句话说，这个属性依赖其他属性，由其他属性计算而来的。

在 computed 属性对象中定义计算属性的方法，和取data对象里的数据属性一样以属性访问的形式调用，即在页面中使用 {{ }} 的方式来显示计算的结果。

注意点：计算属性 fullName 不能在 data 中定义，而计算属性值的相关已知值在data中， 如果 fullName 在 data 中定义了会报错

如果 computed 属性值是一个函数，那么默认会走 get 方法，必须要有一个返回值，函数的返回值就是属性的属性值。计算属性定义了 fullName 并返回对应的结果给这个变量，变量不可被重复定义和赋值。

在页面中多次显示 fullName

computed 内定义的 function 只会执行一次，当初始化显示或者相关的 data、props 等属性数据发生变化的时候才会调用

只有当 computed 属性被使用后，才会执行 computed 的代码，只要依赖数据不变，直接取缓存中的计算结果。只有依赖型数据发生改变，computed 才会重新计算。

在computed 中的属性都有一个 get 和一个 set 方法，当数据变化时，调用 set 方法。通过计算属性的 getter/setter 方法来实现对属性数据的显示和监视，即双向绑定。

通过 vm 对象的 $watch() 或 watch 配置来监听 Vue 实例上的属性变化，或某些特定数据的变化，然后执行某些具体的业务逻辑操作。当属性变化时，回调函数自动调用，在函数内部进行计算。它可以监听data，props，computed 内的数据。

注意点： 监听函数有两个参数，第一个参数是最新的值，第二个参数是输入之前的值，顺序一定是新值，旧值，如果只写一个参数，就是最新属性值。

对于复杂数据类型需要用到深度监听 deep。

如果要监听对象的单个属性的变化，有两种方法

watch和computed都是以Vue的依赖追踪机制为基础的，当某一个依赖型数据发生变化的时候，所有依赖这个数据的相关数据会自动发生变化，即自动调用相关的函数，来实现数据的变动。

当依赖的值变化时，在watch中，可以做一些复杂的操作，而computed中的依赖，仅仅是一个值依赖于另一个值，是值上的依赖。

以上就是在Vue中computed和watch区别啦，希望对你有帮助。